<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>

    const arr = [
      {
        id: 2,
        name: '部门B',
        parentId: 0
      },
      {
        id: 3,
        name: '部门C',
        parentId: 1
      },
      {
        id: 1,
        name: '部门A',
        parentId: 2
      },
      {
        id: 4,
        name: '部门D',
        parentId: 1
      },
      {
        id: 5,
        name: '部门E',
        parentId: 2
      },
      {
        id: 6,
        name: '部门F',
        parentId: 3
      },
      {
        id: 7,
        name: '部门G',
        parentId: 2
      },
      {
        id: 8,
        name: '部门H',
        parentId: 4
      }
    ]

    function buildTree(arr) {
      const map = new Map(arr.map(item => [item.id, { ...item, children: [] }])) // 先把每个节点都放到 map 中
      const tree = [] // 最终的树形结构
      arr.forEach(item => {
        const parent = map.get(item.parentId) // 找到父节点
        if (parent) {
          parent.children.push(map.get(item.id)) // 将当前节点添加到父节点的 children 中
        } else {
          tree.push(map.get(item.id)) // 如果没有父节点，则是根节点，添加到树中
        }
      })
      return tree
    }

    const tree = buildTree(arr)
    console.log(JSON.stringify(tree, null, 2)) // 打印树形结构
    // 输出结果为树形结构

  </script>
</body>

</html>